/*screen-框架*/
html,body{height:100%; overflow: hidden;}
body{padding-top:116px; padding-bottom:4px; background: url("images/body_bg.png") center center no-repeat; background-size: 100% 100%;}
.screen-header{height:96px; background: url("images/header_bg.png") left top no-repeat; background-size: 100% 100%; color:#fff; margin-top:-116px; margin-bottom: 20px;}
.screen-logo{position:absolute; left:50%; top:0; margin-left: -116px;}
.screen-name{float: left; text-align: left; font-size:30px; font-weight: bold; text-shadow: 0px 0px 6px blue; margin:0; line-height:60px; margin-top:56px; margin-left: 20px;}
.screen-time{float: right; text-shadow: 0px 0px 6px blue; margin-top: 56px; margin-right: 20px;}
.screen-time .time{font-size:30px; font-weight: bold;}
.screen-time .date{line-height: 20px;}

.screen-main{height:100%;}
.main-box{display: flex; flex-flow: row; height:100%; width:100%;}
.main-col{display: flex; flex-flow: column; padding: 0 2px; height:100%;}
.main-col-left, .main-col-right{width:467px;}
.main-col-center{flex: 1;}

.screen-panel{width:100%; margin:2px 0; border: 1px solid #073f88; box-shadow: 0 0 10px #073f88; position: relative;}
.screen-panel h4{position: absolute; left: 50%; top:0; margin:-2px 0 0 -120px; width: 240px; height: 17px; line-height: 17px; color: #a2a2a2; background-image: url(/css/screen/images/title_bg.png); background-repeat: no-repeat; background-size: 100% auto; border-radius: 3px; text-align: center; font-size: 12px;}

.main-col-left1{flex: 3;}
.main-col-left2{flex: 2;}
.main-col-center1{height: 74px; display: flex; flex-flow: row;}
.main-col-center2{flex: 1;}
.main-col-center3{height: 170px;}
.main-col-right1{flex: 1;}
.main-col-right2{flex: 1;}
.main-col-right3{flex: 1;}
.main-col-center1-col{color: #adcaf4; font-size:22px; line-height:74px;}
.main-col-center1-col1{flex: 6; text-indent: 30px;}
.main-col-center1-col2{flex: 2;}
.main-col-center1-col3{flex: 2;}
.main-col-center1-value{color: #bf7d7d; display: inline-block; text-indent: 10px;}
.main-col-center1-value-total{color: #FFD11B; font-size: 30px; vertical-align: bottom; display: inline-block; text-indent: 10px;}

.flow-count-box{height:100%; padding:30px 30px 0 30px; display: flex;flex-flow: column;}
.flow-count-box .flow-count-detail{flex: 1; display: flex; flex-flow: row;}
.flow-count-box .flow-count-rank{width: 32px; height:32px; line-height:32px; border-radius: 16px; background: #0162d1; text-align: center; color: #fff; font-size: 12px;}
.flow-count-box .flow-count-style{flex: 1; color: #fff; text-indent: 20px; margin-left: -10px; height:20px; margin-top:6px;}
.flow-count-box .flow-count-name{background: #0162d1; border-top-right-radius: 16px; border-bottom-right-radius: 16px;}
.flow-count-box .flow-count-num{width: 100px; height:32px; line-height:32px; color: #0162d1; font-weight: bold; text-indent: 10px;}
.flow-count-box .flow-count-rank-1{background: #e53fe0;}
.flow-count-box .flow-count-name-1{background: #e53fe0;}
.flow-count-box .flow-count-num-1{color: #e53fe0;}
.flow-count-box .flow-count-rank-2{background: #EDC744;}
.flow-count-box .flow-count-name-2{background: #EDC744;}
.flow-count-box .flow-count-num-2{color: #EDC744;}